import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css"
import NotFound from "../views/404";

Vue.use(VueRouter);

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
}

/**
 * (1) 有name属性的菜单才渲染
 * (2) hideChildrenInMenu: true, 不显示子菜单
 * (3) hideInMenu: true, 在菜单中不显示
 * (4) meta 元信息
 */
const routes = [
  // /user 不需要在菜单中显示
  {
    path: "/user",
    hideInMenu: true,
    component: () => import(/* webpackChunkName: "layout" */ "../layout/UserLayout"),
    children: [
      {
        path: "/user",
        redirect: "/user/login"
      },
      {
        path: "/user/login",
        name: "login",
        component: () => import(/* webpackChunkName: "user" */ "../views/User/Login")
      },
      {
        path: "/user/register",
        name: "register",
        component: () => import(/* webpackChunkName: "user" */ "../views/User/Register")
      }
    ]
  },
  {
    path: "/",
    component: () => import(/* webpackChunkName: "layout" */ "../layout/BasicLayout"),
    children: [
      {
        path: "/",
        redirect: "/dashboard/analysis"
      },
      // dashboard 一级菜单
      {
        path: "/dashboard",
        name: "dashboard",
        meta: { icon: 'dashboard', title: '仪表盘'},
        component: { render: h => h("router-view") },
        children: [
          {
            path: "/dashboard/analysis",
            name: "analysis",
            meta: { title: '分析页' },
            component: () => import(/* webpackChunkName: "dashboard" */ "../views/Dashboard/Analysis")
          }
        ]
      },
      // form
      {
        path: "/form",
        name: "form",
        meta: { icon: 'form', title: '表单'},
        component: { render: h => h("router-view") },
        children: [
          {
            path: "/form/basic-form",
            name: "basicform",
            meta: { title: '基础表单' },
            component: () => import(/* webpackChunkName: "form" */ "../views/Form/BasicForm")
          },
          {
            path: "/form/step-form",
            name: "stepform",
            hideChildrenInMenu: true,
            meta: { title: '分步表单' },
            component: () => import(/* webpackChunkName: "form" */ "../views/Form/StepForm"),
            children: [
              {
                path: "/form/step-form",
                redirect: "/form/step-form/info"
              },
              {
                path: "/form/step-form/info",
                name: "info",
                component: () => import(/* webpackChunkName: "form" */ "../views/Form/StepForm/Step1")
              },
              {
                path: "/form/step-form/confirm",
                name: "confirm",
                component: () => import(/* webpackChunkName: "form" */ "../views/Form/StepForm/Step2")
              },
              {
                path: "/form/step-form/result",
                name: "result",
                component: () => import(/* webpackChunkName: "form" */ "../views/Form/StepForm/Step3")
              }
            ]
          }
        ]
      },
      // gis
      {
        path: "/gis",
        name: "gis",
        meta: { icon: 'global', title: 'GIS'},
        component: { render: h => h("router-view") },
        children: [
          //iearth
          {
            path: "/gis/earth",
            name: "earth",
            meta: { icon: "cloud", title: "iEarth"},
            component: () => import(/* webpackChunkName: "gis" */ "../views/Gis/IEarth")
          },
          // 地形
          {
            path: "/gis/terrain",
            name: "terrain",
            meta: { icon: 'apple', title: "地形"},
            component: () => import(/* webpackChunkName: "gis" */ "../views/Gis/Terrain")
          },
          // 影像
          {
            path: "/gis/image",
            name: "image",
            meta: { icon: "ie", title: "影像"},
            component: () => import(/* webpackChunkName: "gis" */ "../views/Gis/ImageLayer")
          },
          // 瓦片
          {
            path: "/gis/tile",
            name: "tile",
            meta: {icon: "qq", title: "瓦片"},
            component: () => import(/* webpackChunkName: "gis" */ "../views/Gis/TileLayer")
          }
        ]
      }

    ]
  },
  {
    path: "*",
    name: "404",
    hideInMenu: true,
    component: NotFound
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if(to.path !== from.path) {
    NProgress.start();
  }
  next();
});

router.afterEach(() => {
  NProgress.done();
})

export default router;
